<template>
  <div class="forget-box">
    <div class="content-box">
      <div class="forget-title">
        修改密码
      </div>
      <div>
        <el-form ref="forgetFormRef" style="margin-top:20px" :model="forgetForm" :rules="forgetRules">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="currentPassword" label="旧密码">
                <el-input style="width:90%;" v-model="forgetForm.currentPassword" type="password" show-password
                  placeholder="请输入旧密码" @keypress.enter="confirm" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="resetPassword" label="新密码">
                <el-input style="width:90%;" v-model="forgetForm.resetPassword" type="password" show-password placeholder="请输入密码"
                  @keypress.enter="confirm" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="confirmPassword" style="margin-top:20px" label="确认密码">
                <el-input style="width:90%;" v-model="forgetForm.confirmPassword" type="password" show-password
                  placeholder="请再次输入密码" @keypress.enter="confirm" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btn-box">
        <div @click="confirm">确认修改</div>
        <el-link style="margin-top:10px;" type="primary" @click="backLogin">返回</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeUnmount, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { successDeal, warningDeal } from '@/utils/utils'
import api from './api'
import hexMD5 from "@/utils/md5.min.js"
export default {
  setup() {
    const router = useRouter()

    const forgetFormRef = ref(null)

    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次确认密码'))
      }
      if (value != state.forgetForm.resetPassword) {
        callback(new Error('两次密码不相同'))
      }
      if (value == state.forgetForm.currentPassword) {
        callback(new Error('新密码不能与旧密码相同'))
      }
      if (value === state.forgetForm.resetPassword) {
        callback()
      }
    }

    const validatePass2 = (rule, value, callback) => {
      const test = /^[a-zA-Z0-9]{6,}$/
      if (!value) {
        callback(new Error('请输入新密码'))
      }
      if (!test.test(value)) {
        callback(new Error('请输入6位以上且只包含数字、字母的密码'))
      }
      if (value == state.forgetForm.currentPassword) {
        callback(new Error('新密码不能与旧密码相同'))
      }
      if (value === state.forgetForm.resetPassword) {
        callback()
      }
    }

    const state = reactive({
      forgetForm: {},
      forgetRules: {
        currentPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        resetPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
      },
    })

    function backLogin() {
      router.go(-1)
    }

    function confirm() {
      forgetFormRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            currentPassword: hexMD5(state.forgetForm.currentPassword),
            resetPassword: hexMD5(state.forgetForm.resetPassword),
            confirmPassword: hexMD5(state.forgetForm.confirmPassword),
          }
          api.forgetResetPwd(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              router.push({ path: '/' })
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    return {
      ...toRefs(state),
      forgetFormRef,
      backLogin,
      confirm,
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-box {
  width: 100%;
  height: 100%;
  background-color: #336feb;
  display: flex;
  .content-box {
    width: 800px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 50px;
    .forget-title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    .btn-box {
      text-align: center;
      margin-top: 40px;
      > div {
        margin: 0 auto;
        width: 40%;
        font-size: 14px;
        background-color: #0081ff;
        border-radius: 3px;
        text-align: center;
        color: #ffffff;
        box-sizing: border-box;
        padding: 8px 20px;
        cursor: pointer;
      }
    }
  }
}
</style>